<template>
  <div class="app-container">
    <div class="top">
      <div class="top_title">全部项目</div>
      <el-button type="primary">新建项目</el-button>
    </div>
    <div class="main">
      <div class="project" v-for="(item,index) in projectList" :key="index">
        <div class="project_top">
          <svg-icon class="title_icon" icon-class="project" />
          <i class="el-icon-more" style="font-size:20px"></i>
        </div>
        <div class="project_title">{{ item.projectName }}</div>
        <div class="project_info">
          <div class="info">
            <div class="left">
              <svg-icon class="box_icon" icon-class="pm_user" />项目创建者
            </div>
            <div class="right">{{ item.createBy }}</div>
          </div>
          <div class="info">
            <div class="left">
              <svg-icon class="box_icon" icon-class="pm_remark" />备注
            </div>
            <div class="right">{{ item.remarks }}</div>
          </div>
        </div>
<!--        <div class="process_line">-->
<!--          <div class="percentage">{{ `${item.percentage} %` }}</div>-->
<!--          <el-progress :percentage="item.percentage" :format="format"></el-progress>-->
<!--        </div>-->
        <div class="project_bottom">
          <div class="date">{{ item.startDate }}</div>
        </div>
        <div class="btn">
          <el-button @click="toProject(item)">查看项目</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

      <script>
import card from "@/views/homePage/components/card";
import project from "@/api/workflow/project.js";
// import myApprovals from "./components/myApprovals.vue";
export default {
  data() {
    return {
      activeTab: "myApprovals",
      title: "我的申请",
      componentName: "purchaseApply",
      projectList: [
        {
          title: "关于自动化运维信息运营商平台",
          manager: "朱梦雅",
          type: "项目采购",
          progress: "采购申请",
          startDate: "2023-02-11",
          percentage: 25
        }
      ]
    };
  },
  components: {
    card
    // myApprovals
  },
  mounted() {
    // let length = document.querySelectorAll(".el-progress__text").length;
    // for (let index = 0; index < length; index++) {
    //   document.querySelectorAll(".el-progress__text")[index].style.display =
    //     "none";
    // }
    this.getList();
  },
  methods: {
    handleClick() {},
    setComponent(apply) {
      this.title = `我的申请（${apply.applyName}）`;
      this.componentName = apply.component;
    },
    format(percentage) {
      return "";
    },
    toProject(row) {
      console.log(row)
      this.$router.push({
        path:"/pm/project",
        query:{
          row:row
        }
      });
    },
    getList() {
      project.getProjectList().then(res => {
        this.projectList = res.rows;
        if(this.projectList){
          for(let i=0;i<this.projectList.length;i++){
            this.projectList[i].remarks=this.projectList[i].remark.slice(0,10)
          }
        }
      });
    },
  }
};
</script>

      <style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: hidden;
  background: #edefef;
  letter-spacing: 0.02rem;
  .top {
    width: 100%;
    margin-bottom: 0.125rem;
    background-color: #ffffff;
    height: 0.4875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.225rem;
    font-weight: 600;
    color: #000000;
    padding: 0.48rem;
  }
  .main {
    overflow-x: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    // align-items: center;
    height: calc(100% - 0.125rem - 0.48rem - 0.48rem);
    // background: #606266;
    .project {
      cursor: pointer;
      padding: 0.3rem;
      width: calc(20% - 0.125rem);
      height: calc(50% - 0.0625rem);
      background: #ffffff;
      margin-bottom: 0.125rem;
      margin-right: 0.125rem;
      .project_top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.2rem;
      }
      .project_title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 0.2rem;
      }
      .project_info {
        .info {
          font-size: 14px;
          margin-bottom: 0.2rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          .left {
            width: 50%;
            color: rgb(168, 174, 187);
          }
        }
      }
      .process_line {
        margin-bottom: 0.2rem;
        .percentage {
          padding: 0 0.125rem;
          font-size: 16px;
        }
      }
      .project_bottom {
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
        .date {
          font-size: 16px;
        }
      }
      .btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
::v-deep .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
}
::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
  padding: 0 0.5rem;
}
::v-deep .el-tabs__content {
  height: calc(100% - 40px);
}
::v-deep .el-tabs__item {
  font-size: 0.2rem;
  font-weight: 600;
  height: 0.625rem;
  line-height: 0.625rem;
  padding: 0 0.5rem;
  color: #606266;
}
.content {
  width: 100%;
  height: 100%;
}
.box_icon {
  font-size: 18px;
  margin-right: 0.125rem;
}
.title_icon {
  font-size: 30px;
}
</style>
